<template>
    <div>
        <my-nvaigation-bar></my-nvaigation-bar>
        <div id="Glxt_containner">
            <el-row>
                <el-col :span="24" id="Glxt_bigtitle">商品信息</el-col>
            </el-row>
  
            <el-row style="margin-top: 20px;">
              <el-col :span="1" offset="1"><el-button type="primary" icon="el-icon-circle-plus-outline" @click="addGoods()">添加商品</el-button></el-col>
              <el-col :span="20">
                <!--查询表单-->
                <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="searchObj.goodsName" placeholder="商品的名称" /> 
                </el-form-item>
                <el-form-item label="详情">
                    <el-input v-model="searchObj.details" placeholder="商品的详情" /> 
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="searchObj.num" placeholder="商品的库存" /> 
                </el-form-item>
                <el-form-item label="花朵">
                    <el-select v-model="searchObj.flowerId" placeholder="请选择植花朵">
                        <el-option
                        v-for="flower in flowerList"
                        :key="flower.id"
                        
                        :label="flower.flowerName"
                        :value="flower.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!--这个单选框↑，使用完v-for要空一行，要不的话会有红色的>，然后下面的代码都加粗了，不知道为什么-->
                <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
                <el-button type="default" @click="resetData()">清空</el-button>
                </el-form>
              </el-col>
            </el-row>
            
            
            <!--表格-->
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="goodsName" label="名称"></el-table-column>
                <el-table-column prop="pic" label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic" style="width: 44px; height: 33px;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="details" label="详情"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="num" label="库存"></el-table-column>
                <el-table-column label="花朵">
                    <template slot-scope="scope">
                        <el-tag>{{getFlowerById(scope.row.flowerId)}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="editClick(scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
  
            <!--页码-->
            <el-row>
                <el-col :span="24"><el-pagination background layout="prev, pager, next" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
            </el-row>
  
            <!--编辑-->
            <el-drawer
            title="编辑商品信息"
            :visible.sync="drawer"
            with-header=true
            :before-close="handleClose">
            <div style="padding:30px">
                <el-form ref="editFlower" :model="form" label-width="60px">
                    <el-form-item label="ID">
                        <el-input v-model="editGoods.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="editGoods.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/shop/shopGoods/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="详情">
                        <el-input v-model="editGoods.details"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="editGoods.price"></el-input>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="editGoods.num"></el-input>
                    </el-form-item>
                    <el-form-item label="花朵">
                        <el-select v-model="editGoods.flowerId" placeholder="请选择花朵">
                            <el-option
                            v-for="flower in flowerList"
                            :key="flower.id"
  
                            :label="flower.flowerName"
                            :value="flower.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="onSubmit">完成</el-button>
                    </div>                    
                </el-form>
            </div>
            </el-drawer>
  
            <!--添加-->
            <el-drawer
              title="添加商品信息"
              :visible.sync="drawerWithAdd"
              with-header=true
              :before-close="handleCloseWithAdd">
              <div style="padding:30px">
                  <el-form ref="saveObj" :model="form" label-width="60px">
                      <el-form-item label="名字">
                          <el-input v-model="saveObj.goodsName"></el-input>
                      </el-form-item>
                      <el-form-item label="图片">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/shop/shopGoods/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                      <el-form-item label="详情">
                          <el-input v-model="saveObj.details"></el-input>
                      </el-form-item>
                      <el-form-item label="价格">
                          <el-input v-model="saveObj.price"></el-input>
                      </el-form-item>
                      <el-form-item label="库存">
                          <el-input v-model="saveObj.num"></el-input>
                      </el-form-item>
                      <el-form-item label="花朵">
                        <el-select v-model="saveObj.flowerId" placeholder="请选择花朵">
                            <el-option
                            v-for="flower in flowerList"
                            :key="flower.id"
  
                            :label="flower.flowerName"
                            :value="flower.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                      <div style="margin-top: 10px;">
                          <el-button type="primary" @click="onSubmitWithSave">完成</el-button>
                      </div>                    
                  </el-form>
              </div>
              </el-drawer>
        </div>
    </div>
  </template>
  
  <script>
  import MyNvaigationBar from '../../components/MyNvaigationBar.vue';
  import HomeFlowerApi from '../../api/home/homeFlower'
  import ShopGoodsApi from '../../api/shop/shopGoodsApi'

  export default {
  components: { MyNvaigationBar },
  data() {
    return {
        list: [], // goods列表
        total: 0, // 总记录数
        page: 1, // 页码
        limit: 10, // 每页记录数
        searchObj: {}, // 查询条件
        saveObj: {},//新增obj
        flowerList: [],// flower列表
        drawer: false,
        editGoods: {}, //修改goods信息的内容
        drawerWithAdd: false, //添加窗口
        img:''
    }
  },
  methods: {
    handleSuccess (response, file, fileList) {
            console.log(response)
              this.saveObj.pic = `http://localhost:8333/shop/shopGoods/download?name=${response.data}`
              this.editGoods.pic = `http://localhost:8333/shop/shopGoods/download?name=${response.data}`
              this.img = this.saveObj.pic
              console.log(this.saveObj.pic)
          },
    //添加新的goods
    onSubmitWithSave() {
      this.$confirm('你确定要添加新的商品吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              return ShopGoodsApi.addGoods(this.saveObj)
          }).then((res) => {
              if (res.data.code == 200) {
                  this.$message.success(res.data.message)
                  this.fetchData()
                  this.drawerWithAdd = false
                  this.saveObj = {}
              } else {
                  this.$message.error(res.data.message);
              }
          }).catch(err => {
              if (err === 'cancel') {
                  this.$message.info('取消添加')
              }
          })
      },
    //编辑信息关闭提醒（添加）
    handleCloseWithAdd(done) {
      this.$confirm('确定退出编辑商品信息？')
          .then(_ => {
              this.saveObj = {}
              done();
          })
          .catch(_ => {});
      },
    //添加商品信息
    addGoods() {
      this.drawerWithAdd = true;
    },
     //修改商品信息
     onSubmit() {
            this.$confirm('你确定要更改商品信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return ShopGoodsApi.updateGoods(this.editGoods)
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.fetchData()
                    this.drawer = false
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消编辑')
                }
            })
        },
    //删除商品
    deleteClick(id) {
            this.$confirm('你确定要删除'+id+'号商品吗','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return ShopGoodsApi.remove(id)
            }).then((res) => {
                this.fetchData()
                this.$message.info(res.data.message)
            }).catch(err => {
                if (err === 'cancel') {
                    this.$message.info('取消删除')
                }
            })  
        },
    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
            this.page = page
            this.fetchData()
        },
    //编辑信息
    editClick(id) {
            this.drawer = true;
            ShopGoodsApi.getGoodsById(id)
            .then(res => {
                this.editGoods = res.data.data
                this.img = this.editGoods.pic
            })
        },
    // 重置表单
    resetData() {
            this.searchObj = {}
            this.fetchData()
        },
    //编辑信息关闭提醒
    handleClose(done) {
        this.$confirm('确定退出编辑商品信息？')
          .then(_ => {
            done();
            this.img = ''
          })
          .catch(_ => {});
        },
    //获取所有花朵信息
    getAllFlower() {
        HomeFlowerApi.getAllFlower()
        .then(res => {
            this.flowerList = res.data.data
        })
    },
    //数据初始化
    fetchData() {
        ShopGoodsApi.pageList(this.page, this.limit, this.searchObj)
        .then(res => {
            this.list = res.data.data.records
            this.total = res.data.data.total
        })
    },
  },
  computed: {
    //跟据id获取flower
    getFlowerById() {
        return id => {
            const item = this.flowerList.find(item => item.id === id)
            return item ? item.flowerName : ''
        }
    },
  },
  created() {
    this.getAllFlower(),
    this.fetchData()
  }
  }
  
  </script>
  
  <style>
    #Glxt_containner{
        width: auto;
        height: auto;
        border:3px dashed #42b983;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 8px;
        margin-top: 10px;
    }
  
    #Glxt_bigtitle {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bolder;
    color:#42b983;
    }

    .image{
    width: 100%;
    height: 324px;
    }
  
  </style>